<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">我是文本<div>我是div</div>
        <span>wo shi span</span>
        <!-- 我是注释 -->
    </div>
    
    <script>
        // 节点（node） ： document dom树 由 节点构成  
        // dom树 有 节点构成 ，节点 包含 元素节点 文本节点 换行节点 空格节点 属性节点...

        // 一、元素节点  
        // 获取所有子节点 :  父元素.childNodes 
        /* 
            1.节点的类型 ： nodeType  === 1;
            2. 节点值 ： nodeValue  是 null
            3. 节点名称： nodeName 是 全大写的标签名 
        
        */

        // var containerEle = document.querySelector(".container");
        // var nodes = containerEle.childNodes;
        // console.log(nodes);
        // console.log(nodes[1].nodeType);
        // 获取container 里的所有元素 
        // nodes.forEach(function(item){
        //     if(item.nodeType===1){
        //         // 所有的元素节点
        //         console.log(item);
        //     }
        // })
        // console.log(nodes[1].nodeValue); // 节点值
        // console.log(nodes[1].nodeName); // 节点名 DIV P SPAN


        // 二、文本节点
        /* 
            1.文本节点的类型 ： nodeType === 3
            2. 文本节点的值 ： nodeValue 是 文本节点里的内容
            3. 文本节点的节点名 ： nodeName  是 #text
        
        */
        var containerEle = document.querySelector(".container");
        var nodes = containerEle.childNodes;
        // console.log(nodes[0].nodeType); // 节点类型是 3；
        // // console.log(nodes[0]);
        // // var str = "我是文本";
        // // console.dir(str);
        // // console.log(nodes[0].nodeValue);
        // console.log(nodes[0].nodeName);



        /* 
            总结 ： dom树由 节点构成 
            一、元素节点 
                1.nodeType ： 1
                2.nodeValue ： null
                3.nodeName ： 大写的标签名
            二、文本节点
                1.nodeType ： 3
                2.nodeValue : 文本内容
                3.nodeName: #text
        
        
        
        
        
        */




    </script>
</body>
</html>